<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/css/base.css" media="screen" charset="utf-8">
    <script src="/js/date.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery.qtip.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/protovis-r3.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/qtip-behavior.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="/css/ui-lightness/jquery-ui-1.8.6.custom.css" type="text/css" media="screen" charset="utf-8">
    <script charset="utf-8">
        var keys = function (obj){
            var k = [];
            for(i in obj) if (obj.hasOwnProperty(i)){
                k.push(i);
            }
            return k;
        }
        
        $(document).ready(function(){
           
           $('a.refresh').click(function(e){
               e.preventDefault();
               var url = $(this).attr('href');
               $('#checking').html('Checking for updates')
               $('#checking').css({'opacity': '1.0'})
               $.get(url, function(data, textsuccess){
                   if(data === '0'){
                       $('#checking').html('None found')
                       setTimeout(function(){
                           $('#checking').css({'opacity': '0'})
                       }, 2000);
                   }else{
                       $('#checking').html(data + ' updates found, reloading')
                       setTimeout(function(){
                           location.reload(true);
                       }, 1000);
                   }
               })
           });
           
           $('a.delete').live('click', function(e){
              e.preventDefault();
              if(confirm('Are you sure you want to delete this?')){
                  $.post($(this).attr('href'), function(data) {
                    window.location = $('li.active a').attr('href');
                  });
              }
           });           
        });
    </script>
</head>
<body>
    <p id="checking"></p>
    <h1 class="header">MarineMap Dashboard</h1>
    <nav>
        <ul>
            <li{% ifequal section 'Timeline' %} class="active"{% endifequal %}><a href="/timeline/">Timeline</a></li>
            <li{% ifequal section 'Projects' %} class="active"{% endifequal %}><a href="/projects/">Projects</a></li>
            <li{% ifequal section 'People' %} class="active"{% endifequal %}><a href="/people/">People</a></li>
            <li{% ifequal section 'Calendar' %} class="active"{% endifequal %}><a href="/calendar/">Calendar</a></li>
            <li id="refresh"><a class="refresh" href="/projects/update/">refresh data</a></li>
            <br>
        </ul>        
    </nav>
    <div class="toptoolbar">
        {% block toptoolbar %}
        {% endblock toptoolbar %}
    </div>
    <div id="content">
        {% block body %}{% endblock body %}        
    </div>
    {% block aftercontent %}
        
    {% endblock aftercontent %}
</body>
</html>
